<template>
	<view class="container">
		<empty v-if="partyList.length == 0"></empty>
		<div v-for="partys in partyList" class="box-class">
			<view class="list_box" v-for="item in partys" @click="navToDetails(item)">
				<view class="list_title" >{{item.name}}</view>
				<view class="more_box">
					<image v-if="item.level == 1" src="/static/image/more.png" class="more_box"></image>
					<image v-else src="/static/image/more1.png" class="more_box"></image>
				</view>
			</view>
		</div>
		<!-- <uni-load-more :status="loadingType" style="height: 60upx;"></uni-load-more> -->
	</view>
</template>

<script>
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				// loadingType: 'more',
				page: 1,
				pageSize: 10,
				communityId: this.$api.util.getAreaCode(),
				partyList: []

			}
		},
		onLoad(option) {
			this.getData()
		},
		// onReachBottom() {
		// 	if (this.loadingType === 'more') {
		// 		this.page = this.page + 1;
		// 		this.getData(this.page)
		// 	}
		// },
		components: {
			empty
		},
		methods: {
			getData() {
				let params = {
					// "page": this.page,
					// "pageSize": this.pageSize,
					"name": "",
					"areaCode": this.communityId
				}
				this.$api.request.queryListParty(params, (res) => {
					if (res.body.status.statusCode === '0') {
						console.log(res.body)
						this.partyList = []
						let partyList = res.body.data.list;
						for (let i = 0; i < partyList.length; i++) {
							let childrenList = [];
							childrenList.push(partyList[i])
							for (let j = 0; j < partyList[i].children.length; j++) {
								childrenList.push(partyList[i].children[j])
							}
							this.partyList.push(childrenList)
						}
						// var total = res.body.data.total
						// if (this.partyList.length >= total) {
						// 	this.loadingType = 'noMore'
						// }
					} else {
						this.$api.msg("系统出错了")
					}
				})
			},
			navToDetails(item) {
				uni.navigateTo({
					url: '/package_isp/pages/party/partyMember' + "?id=" + item.partyOrganizationId
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		/* background-color: #FBFBFB; */
		overflow: hidden;
		padding: 16upx;
	}

	.box-class {
		background-color: #F1F1F1;
		border-radius: 50upx;
		padding: 32upx 16upx 1upx 16upx;
		margin-bottom: 24upx;
	}

	.list_box {
		background: #FFFFFF;
		box-shadow: 2upx 2upx 22upx -2upx rgba(0, 0, 0, 0.1);
		height: 100upx;
		padding: 30upx 30upx 30upx 40upx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 32upx;
		border-radius: 50upx;
	}

	.list_title {
		width: 568upx;
		/* line-height: 80upx; */
		font-size: 30upx;
		font-weight: bold;
		transition: all .5s;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.more_box {
		width: 40upx;
		height: 40upx;
		border-radius: 20upx;
		/* background: #E65540; */
	}
</style>
